<template>
  <view class="order-list-wrap">
    <!-- <u-tabs :list="list" lineColor="#d69b1d"></u-tabs> -->

    <view
      class="order-list-item-wrap"
      v-for="item in orders"
      :key="item.pay_id"
    >
      <view class="order-list-title-wrap">
        <view>订单号 : {{ item.pay_id }}</view>
        <view class="order-list-status-txt">
          <view class="status-nopay" v-if="item.status == 'NOTPAY'">未支付</view>
          <view class="status-payed" v-if="item.status == 'SUCCESS'">已支付</view>
          <view class="" v-if="item.status == 'REFUNDING'">退款中</view>
          <view class="" v-if="item.status == 'REFUNDED'">已退款</view>
        </view>
      </view>

      <view class="order-wrap">
        <view class="order-wrap-left">
          <image src="https://ya30images.hbwlife.com/wxmp/default-pic.png" />
        </view>
        <view class="order-content">
          <view class="order-name">{{
            item.pay_for == 'TICKET' ? '购买泳票' : ''
          }}</view>

          <view class="order-time">时间：{{ item.created_time || '' }}</view>
          <view class="order-price"
            >金额：￥{{ item.pay_amount / 100 || 0 }}</view
          >
        </view>
      </view>

      <view class="order-list-foot-wrap">
        <view class="order-list-price-wrap">
          <view class="order-list-price-item">
            <text
              class="cancel-btn"
              v-show="item.status == 'SUCCESS'"
              @click="fnPayback(item)"
              >申请退款</text
            >
            <text
              class="cancel-btn"
              v-show="item.status == 'NOTPAY'"
              @click="goTitckDetail(item)"
              >立即支付</text
            >
            <!-- <text class="cancel-btn" @click="goOrderDetail(item)"
              >查看详情</text> -->
            <text class="cancel-btn again-pay" @click="goOrderTitckList(item)"
              >再次购买</text
            >
          </view>
        </view>
      </view>
    </view>

    <view v-if="orders.length === 0" class="noData">暂无数据~</view>
  </view>
</template>

<script>
import { request, requestData } from '@/utils/http.js'
export default {
  name: 'myOrder',
  data() {
    return {
      triggeredAll: true,
      triggered: true,
      modalShow: false,
      page: 0,
      // list: [
      //   {
      //     name: '我的订单',
      //   },
      //   {
      //     name: '退款订单',
      //   },
      //   {
      //     name: '待付款',
      //   },
      //   {
      //     name: '待核销',
      //   },
      //   {
      //     name: '已核销',
      //   },
      // ],
      qrcodeText: '二维码',
      orders: [],
    }
  },
  onShow: function () {
    this.initList()
  },
  methods: {
    //我的订单列表，接口 30 ，退款在31
    initList() {
      request('/user/pay/list', {
        page: 0,
      })
        .then((res) => {
          this.orders = res?.datas?.orders || []
          //this.titckTemplates = res?.datas?.templates
        })
        .catch((err) => {
          console.log(err)
        })
    },
    fnPayback(data) {
      console.log(data)
      request('/user/payback/apply', {
        pay_id: data.pay_id,
      })
        .then((res) => {
          console.log(res)
          //this.orders = res?.datas?.orders || []
          //this.titckTemplates = res?.datas?.templates
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //未支付去详情页
    goTitckDetail(data) {
      uni.switchTab({
        url: '/pages/site/index/index',
      })
    },

    //去订单详情页
    goOrderDetail() {},
    //该页面接口返回加上template_id后，就可以跳转到pagesB/titckDetail/titckDetail
    goOrderTitckList() {
      uni.switchTab({
        url: '/pages/site/index/index',
      })
    },
  },
  watch: {},
}
</script>

<style lang="scss">
.order-list-wrap {
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
  box-sizing: border-box;
  background: #f7f7f8;
}
.order-list-item-wrap {
  width: 100%;
  height: auto;
  max-height: 433rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.order-list-title-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
  font-size: 24rpx;
  color: #888787;
  border-bottom: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-list-status-txt {
  color: $global-color-golden;
}
.status-nopay{
  color: #e23232;
}
.status-payed{
  color: #676a6d;
}
.order-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.order-wrap-left {
  width: 150rpx;
  height: 150rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-wrap-left image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.order-content {
  flex: 1;
  padding-left: 25rpx;
  padding-right: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
}
// .order-list-title {
//   margin-top: 10rpx;
// }
.order-name {
  color: rgba(26, 27, 29, 1);
  font-weight: 500;
}
.order-time {
  margin-top: 20rpx;
  color: #676a6d;
}
.order-price {
  margin-top: 20rpx;
  color: $global-color-golden;
}
.order-list-foot-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
}
.order-list-price-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  // font-size: 26rpx;
}
.order-list-price-item:first-child {
  // margin-right: 28rpx;
}
.order-list-price-item {
  // color: #9c9c9c;
}
.cancel-btn {
  width: auto;
  height: auto;
  padding: 10rpx 15rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #414141;
  margin-left: 28rpx;
  background: #ccc;
  color: #6d6a6a;
  background: #eeefee;
}
.again-pay {
  background: #fbeed5;
    color: #e2a118;
}
.order-list-price-num-all {
  color: #010101;
}
.order-list-price-label {
  margin-right: 20rpx;
}
.order-list-btn-wrap {
  width: 100%;
  height: auto;
  margin-top: 13rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.order-list-btn-text {
  justify-content: flex-end;
}
.order-list-modal {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.h-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #fff;
  border-radius: 27.5rpx;
  width: 157rpx;
  height: 55rpx;
}
.h-button-default {
  background-color: #efefef;
  color: #010101;
}
.h-button-primary {
  background-image: linear-gradient(to right, #d5ad57, #d69b1d);
  color: #fff;
}
.h-button-text {
  background-color: rgba(0, 0, 0, 0);
  color: #f34040;
}
.h-button-disabled {
  background-color: #cbcbcb;
  color: #888787;
  background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
}
.noData {
  width: 100%;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #9fa0a0;
}
</style>
